
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <title>运行HTML</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/5.1.3/css/bootstrap.min.css"> 
    <script src="https://cdn.staticfile.org/codemirror/5.40.2/codemirror.min.js"></script>
    <link rel="stylesheet" href="https://cdn.staticfile.org/codemirror/5.40.2/codemirror.min.css">
    <script src="https://cdn.staticfile.org/codemirror/5.40.2/mode/htmlmixed/htmlmixed.min.js"></script>
    <script src="https://cdn.staticfile.org/codemirror/5.40.2/mode/css/css.min.js"></script>
    <script src="https://cdn.staticfile.org/codemirror/5.40.2/mode/javascript/javascript.min.js"></script>
    <script src="https://cdn.staticfile.org/codemirror/5.40.2/mode/xml/xml.min.js"></script>
    <script src="https://cdn.staticfile.org/codemirror/5.40.2/addon/edit/closetag.min.js"></script>
    <script src="https://cdn.staticfile.org/codemirror/5.40.2/addon/edit/closebrackets.min.js"></script> 
    <script src="https://unpkg.com/split.js/dist/split.min.js"></script>
    <script src="../libs/Unify.js"></script>
<style>
body{background: #f6f6f6;}
   .split {
    display: flex;
    flex-direction: row;
}
#iframeResult {
  display: block;
  height:100%;
  width:100%;  
}
.gutter {
    background-color: #f6f6f6;
    background-repeat: no-repeat;
    background-position: 50%;
}
</style>
</head>
<body>
      <div class="container-fluid pb-3">
        <div class="split">
            <div id="split-0" class="bg-body rounded shadow-sm">
              <div class="card">
                <div class="card-header">
                  <button type="button" class="btn btn-success float-end" onclick="submitTryit()" id="submitBTN"> 点击运行 》</button>
                </div>
                <div class="card-body">
                  <textarea class="form-control" id="textareaCode" name="textareaCode">
&lt;html&gt;
  &lt;head&gt;
  &lt;style&gt;
  .input{
    width: 200px;height: 45px;border-radius: 5px;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;input class='input' id='btn' type='button' value='测试按钮' onclick='clickHandler()'&gt;
    &lt;script&gt;
      let btn=document.getElementById('btn');
      function clickHandler(){
        btn.value=Math.random();
      }
    &lt;/script&gt;
  &lt;/body&gt;
&lt;/html&gt;</textarea>
                </div>
              </div>
            </div>
            <div id="split-1" class="bg-body rounded shadow-sm">
              <div class="card">
                <div class="card-header">
                  <button type="button" class="btn btn-outline-secondary">运行结果：</button>
                </div>
                <div class="card-body">
                  <div id="iframewrapper"></div>
                </div>
              </div>
            </div>
        </div>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

<script>
var mixedMode = {
name: "htmlmixed",
scriptTypes: [{matches: /\/x-handlebars-template|\/x-mustache/i,
               mode: null},
              {matches: /(text|application)\/(x-)?vb(a|script)/i,
               mode: "vbscript"}]
};
var editor = CodeMirror.fromTextArea(document.getElementById("textareaCode"), {
	mode: mixedMode,
	selectionPointer: true,
	lineNumbers: false,
	matchBrackets: true,
	indentUnit: 4,
	indentWithTabs: true
});

window.addEventListener("resize", autodivheight);

var x = 0;
function autodivheight(){
    var winHeight=0;
    if (window.innerHeight) {
        winHeight = window.innerHeight;
    } else if ((document.body) && (document.body.clientHeight)) {
        winHeight = document.body.clientHeight;
    }
    //通过深入Document内部对body进行检测，获取浏览器窗口高度
    if (document.documentElement && document.documentElement.clientHeight) {
        winHeight = document.documentElement.clientHeight;
    }
    height = winHeight*0.86
    editor.setSize('100%', height);
    document.getElementById("iframeResult").style.height= height +"px";    
}
function submitTryit() {
  var text = editor.getValue();
  var patternHtml = /<html[^>]*>((.|[\n\r])*)<\/html>/im;
  var patternHead = /<head[^>]*>((.|[\n\r])*)<\/head>/im;
  var array_matches_head = patternHead.exec(text);
  var patternBody = /<body[^>]*>((.|[\n\r])*)<\/body>/im;
  
  var array_matches_body = patternBody.exec(text);
  var basepath_flag = 1;
  var basepath = '';
  if(basepath_flag) {
    basepath = '<base href="//www.runoob.com/try/demo_source/" target="_blank">';
  }
  if(array_matches_head) {
    text = text.replace('<head>', '<head>' + basepath );
  } else if (patternHtml) {
    text = text.replace('<html>', '<head>' + basepath + '</head>');
  } else if (array_matches_body) {
    text = text.replace('<body>', '<body>' + basepath );
  } else {
    text = basepath + text;
  }
  var ifr = document.createElement("iframe");
  ifr.setAttribute("frameborder", "0");
  ifr.setAttribute("id", "iframeResult");  
  
  document.getElementById("iframewrapper").innerHTML = "";
  document.getElementById("iframewrapper").appendChild(ifr);
 
  var ifrw = (ifr.contentWindow) ? ifr.contentWindow : (ifr.contentDocument.document) ? ifr.contentDocument.document : ifr.contentDocument;

  //增加网页
  //ifr.src='file:///E:/as3%E5%B7%A5%E7%A8%8B%E6%96%87%E4%BB%B6/%E5%B7%A5%E4%BD%9C%E4%B8%8A%E5%86%99%E7%9A%84%E5%B7%A5%E5%85%B7/JS-INDEX/tool/onlineWriteJs.html'
  let doc=ifrw.document;
  ifrw.document.open();
  ifrw.document.write(text);  
  ifrw.document.close();
  autodivheight();
}
submitTryit();
autodivheight();

function saveCode(){
  var source=editor.getValue();
  Unify.setLocalData('saveName',source);
}
function readCode(){
  var source=Unify.getLocalData('saveName')||'';
  editor.setValue(source);
}

Split(['#split-0', '#split-1']);

</script>

</div>
</body>
</html>
